{% extends "base.html" %}
{% load static from staticfiles %}
{% block css %}
<link rel="stylesheet" type="text/css" media="all" href="{%static "css/base.css" %}" />
<link rel="stylesheet" type="text/css" media="all" href="{%static "jquery-ui-1.10.3/themes/base/jquery-ui.css" %}" />

{% endblock %}

{% block javascriptload %}
<script>
			//Creation de l'accordeon
			$(function() {
				$("#accordion").accordion();
			});

			//Création de button
			$(function() {
				$("b,.vider").button().click(function(event) {
					event.preventDefault();
				});
			});

			//Auto completion

				$(function() {
					$("#tags").autocomplete({
						source : "/autocompletion_poudre",
						minLength : 1,
						autoFocus: true,
					});
				});
			////////////////////////////////////////////////////////
			$(function() {
				// run the currently selected effect
				function runEffect() {
					$("#effect").slideDown();
				};
				//callback function to bring a hidden box back

				$("#button").click(function(e) {
					
						var lien = "/search_poudre?term="+$("input").val().replace(/ /g, '_');
						$('#contenu_du_toggler').fadeOut('fast', function() {
							$('#contenu_du_toggler').load(lien, function() {
								$('#contenu_du_toggler').fadeIn('fast');
							});
						});
						e.preventDefault()
						


					runEffect();
					return false;
				});
				$("#effect").hide();
			});
			// set effect from select menu value

</script>
{% endblock %}

{% block content %}
<h1 id='s1'>Voici la liste des derniers POLLS</h1>
		
		<div id="accordion">
			<h3>Listes de 5 derniers polls<a href="#" id="button" class="ui-state-default ui-corner-all">Create</a></h3>
			<div>
				<h3>Liste bột đã nhập :</h3>
					{% if latest_list %}
					<ol>{% for poll in latest_list %}
						<li><a href="/polls/{{ poll.id }}/">{{ poll.nom}}</a></li>
						{% endfor %}
					</ol>
					{% else %}
						<p>No polls are available.</p>
					{% endif %}
				
			</div>
			<h3>Rechercher un poll donné</h3>
			<div>
				<p>
					<h3>Tapez ce qu'il faut chercher on vous suggère des polls par la suite</h3>
				</p>
				<div class="ui-widget">
					<label for="tags">Poll dont la question est: </label>
					<input id="tags" value=""/>
					<a href="#" id="button" class="ui-state-default ui-corner-all">Valider</a>
					<p>Appeler la 1ère page en AJAX : <a href="/test-get/?message=coucou" id="ajax1">Test Get</a></p>
					<p id="reponse-get"></p>
					<div class="toggler">
						<div id="effect" class="ui-widget-content ui-corner-all">
							<h3 class="ui-widget-header ui-corner-all">Show</h3>
							<p id="contenu_du_toggler">
								Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
								<table style="width: 100%; padding: 5px;" class="table">
									<thead class="ui-widget-header">
										<tr>
											<th> Référence </th>
											<th> Type de Client </th>
											<th> Fournisseur </th>
											<th> Dénomination </th>
											<th> Créé le </th>
										</tr>
									</thead>
									<tbody>
								</table>

							</p>
						</div>
					</div>
				</div>				
			</div>	
			
</div>
{% endblock %}